import React, { useState } from 'react';

import {
  ProForm,
  ProFormDatePicker,
  ProFormDateRangePicker,
  ProFormDigit,
  ProFormRadio,
  ProFormSelect,
  ProFormSwitch,
  ProFormText,
  ProFormTextArea,
  ProFormCascader,
} from '@ant-design/pro-components';
import { Col, message, Row, Space, Button, Form, Input, Divider } from 'antd';

const BasicInformation: React.FC = () => {
  return (
    <>
      <Row gutter={[16, 16]}>
        <Col flex={3}>
          <ProFormText
            name="name"
            label="归属合作方"
            tooltip="最长为 24 位"
            placeholder="请输入名称"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
        <Col flex={3}></Col>
        <Col flex={3}></Col>
      </Row>
      <Row gutter={[16, 16]}>
        <Col flex={3}>
          <ProFormCascader
            name="city"
            request={async () => [
              {
                value: 'zhejiang',
                label: '浙江',
                children: [
                  {
                    value: 'hangzhou',
                    label: '杭州',
                    children: [
                      {
                        value: 'xihu',
                        label: '西湖',
                      },
                    ],
                  },
                ],
              },
              {
                value: 'jiangsu',
                label: 'Jiangsu',
                children: [
                  {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                      {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua Men',
                      },
                    ],
                  },
                ],
              },
            ]}
            label="区域"
            initialValue={['zhejiang', 'hangzhou', 'xihu']}
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
        <Col flex={3}>
          <ProFormRadio.Group
            label="客户类型"
            name="invoiceType"
            initialValue="普通客户"
            options={['普通客户', '集团客户']}
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
        <Col flex={3}>
          <ProFormText name="name1" label="所属集团" />
        </Col>
      </Row>
      <Row gutter={[16, 16]}>
        <Col flex={3}>
          <ProFormText name="name21" label="上级商户" />
        </Col>
        <Col flex={3}>
          <ProFormRadio.Group
            label="小微商户"
            name="invoiceType2"
            initialValue=""
            options={['开通', '不开通']}
          />
        </Col>
        <Col flex={3}>
          <ProFormText
            name="namess"
            label="客户中文名称"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
      </Row>
      <Row gutter={[16, 16]}>
        <Col flex={3}>
          <ProFormText
            name="namess"
            label="客户中文简称"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
        <Col flex={3}>
          <ProFormText
            name="namess"
            label="客户英文名称"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
        <Col flex={3}>
          <ProFormText
            name="namess"
            label="客户英文简称"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
      </Row>
      <Row gutter={[16, 16]}>
        <Col flex={3}>
          <ProFormText name="sda" label="支付服务协议号码" />
        </Col>
        <Col flex={3}>
          <ProFormText name="sda12" label="支付服务协议有效期" />
        </Col>
        <Col flex={3}>
          <ProFormText
            name="namecs"
            label="BR商业登记证号码"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
      </Row>
      <Row gutter={[16, 16]}>
        <Col flex={3}>
          <ProFormText name="namecs" label="BR商业登记证号码" />
        </Col>
        <Col flex={3}>
          <ProFormText
            name="namecs"
            label="BR商业登记证有效期"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
        <Col flex={3}>
          <ProFormSelect.SearchSelect
            options={[
              {
                value: 'time',
                label: '履行完终止',
                type: 'time',
                options: [
                  {
                    value: 'time1',
                    label: '履行完终止1',
                  },
                  {
                    value: 'time2',
                    label: '履行完终止2',
                  },
                ],
              },
            ]}
            name="unusedMode"
            label="行业类型"
          />
        </Col>
      </Row>
      <Row gutter={[16, 16]}>
        <Col flex={3}>
          <ProFormText
            name="name1cs"
            label="业务地址（中）"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
        <Col flex={3}>
          <ProFormText
            name="namecss"
            label="业务地址（英）"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
      </Row>
      <Row gutter={[16, 16]}>
        <Col flex={3}>
          <ProFormText name="ncs" label="商户网站地址" />
        </Col>
        <Col flex={3}>
          <ProFormText
            name="ncsds"
            label="拥有人/董事长姓名（中）"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
        <Col flex={3}>
          <ProFormText
            name="ncsds"
            label="拥有人/董事长姓名（英）"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
      </Row>
      <Row gutter={[16, 16]}>
        <Col flex={3}>
          <ProFormSelect
            colProps={{ xl: 8, md: 12 }}
            label="拥有人/董事姓名证件类型"
            name="level"
            valueEnum={{
              1: 'front end',
              2: 'back end',
              3: 'full stack',
            }}
          />
        </Col>
        <Col flex={3}>
          <ProFormText
            name="ncwsss"
            label="拥有人/董事身份证件号码"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
        <Col flex={3}>
          <ProFormText name="sasncwsss" label="拥有人/董事身份证件有效期" />
        </Col>
      </Row>
      <Row gutter={[16, 16]}>
        <Col flex={3}>
          <ProFormText
            name="sasss"
            label="客户联系人"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
        <Col flex={3}>
          <ProFormText
            name="nnsdss"
            label="客户联系电话"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
        <Col flex={3}>
          <ProFormText
            name="youxiang"
            label="联系邮箱"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
      </Row>
      <Row gutter={[16, 16]}>
        <Col flex={3}>
          <ProFormSelect
            colProps={{ xl: 8, md: 12 }}
            label="总体评价"
            name="level"
            valueEnum={{
              1: 'front end',
              2: 'back end',
              3: 'full stack',
            }}
          />
        </Col>
        <Col flex={3}>
          <ProFormText name="tuozhan" label="拓展单位" />
        </Col>
        <Col flex={3}>
          <ProFormDatePicker
            width="md"
            name="expirationTime"
            label="合同失效时间"
          />
        </Col>
      </Row>
      <Row gutter={[16, 16]}>
        <Col flex={3}>
          <ProFormText
            name="tuozhan"
            label="拓展人"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
        <Col flex={3}>
          <ProFormText
            name="tuozhanren"
            label="拓展人邮箱"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
        <Col flex={3}>
          <ProFormSelect
            colProps={{ xl: 8, md: 12 }}
            label="风控等级"
            name="level"
            valueEnum={{
              1: 'front end',
              2: 'back end',
              3: 'full stack',
            }}
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
        <Col flex={3}>
          <ProFormText name="tuozhanren" label="MAR1有效期" />
        </Col>
      </Row>
      <Row gutter={[16, 16]}>
        <Col flex={3}>
          {/* <ProFormTextArea name="beizhu" label="备注" rows={2} /> */}
          <ProFormTextArea width="xl" label="备注" name="remark" />
        </Col>
      </Row>
    </>
  );
};
export default BasicInformation;
